<template>
  <div class="community-article-list-box">
    <div class="community-article-list" :style="{'margin-right':marginRight+'px'}">
      <div
        class="community-card-box community-article-list-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <commentItem
          :ref="setCommentItemRef"
          :postsDetail="item"
          :commentIndex="index"
          @voteUpdate="voteUpdate"
          @updateItem="updateItem"
          @videoPlay="videoPlayHandler"
          @videoEndPlay="videoEndPlayHandler"
          :videoIsPlay="videoPlayIdx === index"
          @followNowUpdate="followNowUpdate"
        ></commentItem>
        <comment v-show="item.showComment" :postsDetail="item"></comment>
      </div>
    </div>

    <!-- 无数据展示 -->
    <div class="community-card-box no-data-box" v-if="!list.length">
      <noData></noData>
    </div>
  </div>
</template>
<script>
import comment from "@/components/comment.vue";
import commentItem from "@/components/commentItem.vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
} from "vue";
export default defineComponent({
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    marginRight:{
      type:Number,
      default:10
    }
  },
  components: {
    commentItem,
    comment,
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();
    let data = reactive({
      videoPlayIdx: "", //视频播放中的元素下标
    });

    let commentItemRefs = []; //帖子组件ref

    // 帖子动态添加ref
    let setCommentItemRef = (el) => {
      if (el) {
        commentItemRefs.push(el);
      }
    };

    // 投票成功后的回调
    let voteUpdate = (obj) =>{
      props.list[obj.commentIndex].vote = obj;
    };  

    // 帖子
    // 付费帖子支付成功后的回调
    let updateItem = (obj) => {
      props.list.forEach((item) => {
        if (item.id == obj.id) {
          item = Object.assign(item, obj);
          console.log(item, "支付成功回调");
        }
      });
    };

    // 关注后回调
    let followNowUpdate = (obj)=>{
      props.list.forEach((item) => {
        if (item.user.id == obj.id) {
          item.is_follow_user = obj.is_follow_user;
        }
      });
      emit("itemFollowNowUpdate",obj)
    };


    // 帖子视频播放回调
    let videoPlayHandler = (idx) => {
      // console.log("视频播放了"+idx)
      if (idx !== data.videoPlayIdx && (data.videoPlayIdx === 0 || data.videoPlayIdx)) {
        commentItemRefs[data.videoPlayIdx].videoPause();
      }
      data.videoPlayIdx = idx;
    };

    // 如果当前播放的视频停止 清空当前播放视频下标
    let videoEndPlayHandler = (idx) => {
      // console.log("视频暂停了"+idx)
      if (idx === data.videoPlayIdx) {
        data.videoPlayIdx = "";
      }
    };

    return {
      followNowUpdate,
      voteUpdate,
      setCommentItemRef,
      updateItem,
      videoPlayHandler,
      videoEndPlayHandler,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.community-article-list-box {
  padding-bottom: 30px;
  
}
// 帖子列表
.community-card-box {
  background: #ffffff;
  border-radius: 10px;
}
.community-article-list {
  // width: 100%;
  // margin-right: 10px;
  .community-article-list-item {
    margin-bottom: 10px;
  }
  > div:first-child {
    margin-top: 10px;
  }
}

// 无数据展示
.no-data-box {
  margin-top: 10px;
}
</style>
